<template>
  <div>
    <essay-header
      :titleleft="titleleft"
      :tableData="tableData"
      @search="search"
      :btnmsg="btnmsg"
      :btnshow="true"
      @add="addDrawer"
    />
    <a-table :columns="columns" :data-source="tableData.value" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <span slot="type" slot-scope="text, record">
        <span v-if="record.type === 0" class="type">公告1</span>
        <span v-if="record.type === 1" class="type">公告2</span>
        <span v-if="record.type === 3" class="type">公告3</span>
        <span v-if="record.type === 4" class="type">公告4</span>
      </span>
      <span slot="operation" slot-scope="text, record">
        <a class="look" @click="lookDrawer(record)">查看</a>
        <a-divider type="vertical" />
        <a @click="deleteDrawer" class="check">删除</a>
        <a-divider type="vertical" />
        <a class="check" @click="editDrawer(record)">编辑</a>
      </span>
    </a-table>
    <edit-modal ref="editModel"></edit-modal>
    <add-modal ref="addModel"></add-modal>
    <look-modal ref="lookModel"></look-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "公告标题",
    dataIndex: "title",
    scopedSlots: { customRender: "title" }
  },
  {
    title: "公告分类",
    className: "column-money",
    dataIndex: "type",
    filters: [
      { text: '测试', value: '0' },
      { text: '反诈新闻', value: '反诈新闻' },
      { text: '专题新闻', value: '2' },
      { text: '义警风采', value: '3' },
    ],
    // filteredValue: filteredInfo.name || null,
    onFilter: (value, record) => record.type.includes(value),
    // sorter: (a, b) => a.name.length - b.name.length,
    // sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
    // ellipsis: true,
    scopedSlots: { customRender: "type" }
  },
  {
    title: "公告摘要",
    dataIndex: "content"
  },
  {
    title: "创建时间",
    dataIndex: "createDate"
  },
  {
    title: "更新时间",
    dataIndex: "updateDate"
  },
  {
    title: "创建者",
    dataIndex: "userId"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
import {request} from "@/utils/request";
import EssayHeader from "@/components/EssayHeader.vue";
import EditModal from "./modals/EditModal";
import AddModal from "./modals/AddModal";
import LookModal from "./modals/LookModal";
export default {
  components: { LookModal, EditModal, EssayHeader, AddModal },
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: "-4",
          name: "image.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
      ],
      titleleft: "公告管理",
      btnmsg: "新增公告",
      btnshow: true,
      tableData: {
        value: [
          {
            key: "1",
            name: "John Brown",
            money: "￥300,000.00",
            address: "New York No. 1 Lake Park"
          },
          {
            key: "2",
            name: "Jim Green",
            money: "￥1,256,000.00",
            address: "London No. 1 Lake Park"
          },
          {
            key: "3",
            name: "Joe Black",
            money: "￥120,000.00",
            address: "Sidney No. 1 Lake Park"
          }
        ]
      },

      editorText: "",
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      },
      columns,

    };
  },
  mounted() {
    // 调用接口
    this.getArtcleData();
    // this.interval = setInterval(() => {
    //   this.getArtcleData();
    // }, 3000);
  },
  methods: {
    //获得公告的数据
    getArtcleData() {
      // const url='https://randomuser.me'
      // url:"/api/dashboard/chart",
      // url:'/api/news/getAllNews',
      request({
        url: "/api/news/getAllNews",
        method: "get",
        params: {}
      }).then(response => {
        this.tableData = {
          data: response.data
        };
        this.tableData.value = this.tableData.data.list;
      });
    },
    search(params) {
      console.info("search", params);
    },
    add(params) {
      console.info("add", params);
      this.visible = true;
    },
    // 编辑 查看公告
    editDrawer(record) {
      this.$refs.editModel.open(record)
    },
    lookDrawer(record) {
      this.$refs.lookModel.open(record)
    },
    // 新增公告
    addDrawer() {
      this.$refs.addModel.open()
    },
    // 删除公告
    deleteDrawer(articleid) {},
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.ant-table-tbody {
  background: #fff;
}
/deep/.ant-table.ant-table-bordered .ant-table-title {
  padding: 0;
}
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.header {
  width: 100%;
  background: #fff;
  display: flex;
  padding: 16px 16px;

  .title {
    flex: 1;
    font-size: 16px;
    color: black;
    font-weight: 500;
  }
  .seacher_add {
    display: flex;
    justify-content: space-around;
    flex: 1;
    .seacher {
      display: flex;
    }
  }
}
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
